<template>
  <div class="Iconbox">
    <el-form :module="form" label-width="80px">
      <el-form-item label="菜单图标 :">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <IconSelect ref="iconSelect" @selected="selected" />
              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="form.icon"
                  slot="prefix"
                  :icon-class="form.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
              </el-input>
            </el-popover>
          </el-form-item>
          <el-form-item label="姓名 : ">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入组件并注册
import IconSelect from '@/components/IconSelect'
import SvgIcon from '@/components/SvgIcon'
export default {
  components:{
    IconSelect,
    SvgIcon
  },
  data(){
    return {
      form:{
        icon: '',
        name: ''
      }
    }
  },
  methods:{
      // 选择图标,并父传子
    selected(name) {
      this.form.icon = name
    },
  }
}
</script>

<style lang="scss" scoped>
  .Iconbox{
    width: 400px;
    height: 200px;
    // background-color: rgb(156, 192, 24);
    margin: 20px 10px 0 10px;
  }
</style>